<template>
  <div></div>
</template>

<script>
import * as THREE from 'three'

export default {
  name: 'NineOne',
  props: {
    msg: String
  },
  data() {
    return {
      cube: null
    }
  },
  mounted() {
    this.initScene();
    this.initCamera();
    this.initRenderer();
    this.addCube();
    this.animation();
  },
  methods: {
    // 初始化场景
    initScene() {
      this.scene = new THREE.Scene();
    },
    // 初始化相机
    initCamera() {
      // 创建一个相机 视点
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      // 设置相机的位置
      this.camera.position.z = 5;
      this.camera.lookAt(0, 0, 0);
    },
    // 初始化渲染器
    initRenderer() {
      // 创建一个渲染器
      this.renderer = new THREE.WebGLRenderer();
      // 设置渲染器尺寸
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(this.renderer.domElement);
    },
    // 添加一个立方体
    addCube() {
      // 定义了一个立方体的对象
      const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);

      // 创建材质
      const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
      this.cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

      // 添加到场景里
      this.scene.add(this.cube);
    },
    // 动画函数
    animation() {
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;

      // 渲染
      this.renderer.render(this.scene, this.camera);

      requestAnimationFrame(this.animation);
    }
  }
}
</script>

<style scoped>

</style>
